<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="card">
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-table :data="noticeList" border stripe>
        <el-table-column align="center" label="序号" type="index" width="100"></el-table-column>
        <el-table-column align="center" label="标题" prop="title">
          <template slot-scope="scope">
            <el-link type="primary" @click="showContent(scope.row.id)">{{scope.row.title}}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布时间" prop="publishTime" width="300">
          <template slot-scope="scope">
            <span >{{$moment(scope.row.publishTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import {getNoticesList} from '../axios/notice'

  export default {
    name: 'Notices',
    data(){
      return { 
        noticeList: [] // 公告列表
      }
    },
    methods:{
      getNotices(){ 
        getNoticesList().then(res => {
          if(res.success){ // 获取通知公告列表
            this.noticeList = res.data

          } 
        })

      // 无后端，模拟数据
      // let notices = [
      //                 {  
      //                   id: '1', 
      //                   title: '关于开展20XX届本科生毕业论文（设计）相似性检测工作的通知', 
      //                   publishTime: '2022-01-19 23:52:21',
      //                   updateTime: '2022-01-19 23:52:21',
      //                   content: '各学院：\n' + 
      //                               '根据《XXXX大学本科生毕业论文（设计）相似性检测实施办法》等文件精神，为做好2020届本科生毕业论文（设计）相似性检测工作，现将相关事宜通知如下：\n' + 
      //                               '    一、检测对象\n' + 
      //                               '         2020届本科生毕业论文（部分毕业设计的专业除外）。\n' + 
      //                               '     二、检测时间\n' + 
      //                               '         系统开放时间为2020年4月9日—5月13日，具体检测时间由各学院自定。\n' + 
      //                               '     三、检测程序\n' + 
      //                               '         学校使用维普论文检测系统进行毕业论文（设计）相似性检测工作。学生在XXXX大学毕业论文（设计）智能管理系统中经指导教师同意后再上传论文（设计）定稿，系统会自动进行相似性检测，并将检测结果和查重报告反馈给指导教师和学生本人，作为论文（设计）评分的重要依据。\n' + 
      //                               '     四、检测要求\n' + 
      //                               '         1.检测文稿以word文档上传。\n' + 
      //                               '         2.学生进行文档检测时，请将定稿后的毕业论文（设计）按照标题、摘要、关键词、目录、正文、参考文献、附录及致谢的顺序排版后上传。\n' + 
      //                               '         3.学生提交检测的单篇文档不得超过20M，如果文档过大，请去除文档中过大的图片；检测系统只针对文字内容进行检测，不对表格、代码、公式及图片进行检测。\n' + 
      //                               '         4.每篇毕业论文（设计）当年原则上限检1次，请确认论文定稿无误后再上传。\n' + 
      //                               '     五、检测结果的处理\n' + 
      //                               '         进行处理。检测过程中如有问题，请及时与教务处实践教学科联系。\n\n\n\n' +  
      //                               '      \t\t\t\t\t\t\t教务处 \n' + 
      //                               '      \t\t\t\t\t\t\t2020年3月30日\n' + 
      //                               '      \t\t\t\t\t\t\t联系人：黄老师 卢老师 李老师\n' + 
      //                               '      \t\t\t\t\t\t\t联系电话：23232323\n' + 
      //                               '      \t\t\t\t\t\t\t电子邮箱:XXXXXX.@abc.edu.cn \n'
      //                 },
      //                 {  
      //                   id: '2', 
      //                   title: '我是一个没有感情的测试数据', 
      //                   publishTime: '2022-01-20 23:52:21',
      //                   updateTime: '2022-01-20 23:52:21', 
      //                   content:  '我是一个没有感情的测试数据\n' + 
      //                             '我是一个没有感情的测试数据\n' +
      //                             '我是一个没有感情的测试数据\n' +
      //                             '我是一个没有感情的测试数据\n' +
      //                             '我是一个没有感情的测试数据\n' +
      //                             '我是一个没有感情的测试数据\n' +
      //                             '我是一个没有感情的测试数据\n' +
      //                             '我是一个没有感情的测试数据\n'
      //                 }
      //   ]
      //   this.noticeList = notices
      },
      showContent(id){ 
        // 进入公告详情页
        console.log(this.$route.path)
        this.$router.push(`${this.$route.path}/${id}`) 
      }
    },
    // 生命钩子，创建时调用
    created(){
      this.getNotices()
    }
  }
</script>

<style scoped>
  .card {
    background-color: #ebeaea;
  }
</style>